import UtilsTemplate from '../../../components/UtilsTemplate';
import {
	isObject,
	isBaseType,
	extend,
	replaceArr,
	defaultTemplate,
	getCalcColumnWidthFn,
	loopTree,
	decimalDigits,
	round,
	add,
	adds,
	multi,
	multis,
	getUid,
	newLexmisApi,
} from '@/util/common';
export default {
	extends:UtilsTemplate,
	data(){
		return {
			apis:[
				{
					name:'判断普通对象',
					info:'除了isBaseType判断为true和数组的值',
					code:`
<script>
import {isObject} from '@lexmis/baseui/src/util/common';

isObject(null); //false
isObject(undefined); //false
isObject(false); //false
isObject(10); //false
isObject('false'); //false
isObject(function(){}); //false
isObject(Symbol.iterator); //false
isObject([]); //false
isObject(new Date()); //true
isObject({}); //true
</${'script'}>`,
					tabs:[
						{
							name:'isObject(val) => boolean',
							args:[
								{name:'val',info:'测试值',type:'any',def:''},
							]
						},
					]
				},{
					name:'判断基本类型',
					info:'null, undefined, boolean, number, string, function, bigint, symbol皆属于基本类型, 可以直接赋值',
					code:`
<script>
import {isBaseType} from '@lexmis/baseui/src/util/common';

isBaseType(null); //true
isBaseType(undefined); //true
isBaseType(false); //true
isBaseType(10); //true
isBaseType('false'); //true
isBaseType(function(){}); //true
isBaseType(Symbol.iterator); //true
isBaseType([]); //false
isBaseType(new Date()); //false
isBaseType({}); //false
</${'script'}>`,
					tabs:[
						{
							name:'isBaseType(val) => boolean',
							args:[
								{name:'val',info:'测试值',type:'any',def:''},
							]
						},
					]
				},{
					name:'深度拷贝',
					info:'合并多个对象(深度拷贝), 后面覆盖前面, 会改变第一个对象, 支持: Date, RegExp, Set, Map等类型的拷贝',
					code:`
<script>
import {extend,replaceArr} from '@lexmis/baseui/src/util/common';

//常用情况
const target1={a:1,b:2};
extend(target1,{a:2,c:3}); //{a:2,b:2,c:3}

//追加数组元素
const target2=[1,2,3];
extend(target2,[4,5]); //[1,2,3,4,5]

//替换数组元素
const target3=[1,2,3];
extend(target3,replaceArr([4,5])); //[4,5,3]

//支持多个对象合并,且以上情况的任意嵌套,组合
const target4={a:1,b:2,c:[1,2,3],d:[1,2,3]};
extend(target4,{a:2,f:10},{c:[4,5]},{d:replaceArr([4,5])});
//{a:2,b:2,c:[1,2,3,4,5],d:[4,5,3],f:10}
</${'script'}>`,
					tabs:[
						{
							name:'extend(target, ...srcs) => target',
							args:[
								{name:'target',info:'目标对象或数组, 会被改变',type:'object | Array',def:''},
								{name:'srcs',info:'被拷贝的对象或数组',type:'Array<object | Array | ReplaceArr>',def:''},
							]
						},
					],
				},{
					name:'默认值模板',
					info:'定义src的默认值(当提供的数据为null或undefined则启用默认值), 且自动转换为默认值的类型. 会删除原始数据有且模板中不存在的属性, 添加模板上有且原始数据不存在的属性',
					code:`
<script>
import {defaultTemplate} from '@lexmis/baseui/src/util/common';

//基本类型
defaultTemplate(10,undefined); //10
defaultTemplate(10,20); //20
defaultTemplate(10,'20'); //20
defaultTemplate(false,null); //false
defaultTemplate(false,true); //true
defaultTemplate(false,'true'); //true

//原样返回
defaultTemplate(null,10); //10
defaultTemplate(null,'10'); //'10'
defaultTemplate(null,{a:1}); //{a:1}

//数组默认值
defaultTemplate([10],[null,'20',20]); //[10,20,20]

//对象默认值
defaultTemplate({a:10,b:false,c:20},{a:'20',b:null,d:'test'}); //{a:20,b:false,c:20}
defaultTemplate({a:10,'?':true},{b:'false',c:null,d:false}); //{a:10,b:false,c:true,d:false}

//自定义处理函数
defaultTemplate(function(data){
	return data*2;
},20); //40
</${'script'}>`,
					tabs:[
						{
							name:'defaultTemplate(def, src) => any',
							args:[
								{name:'def',info:'模板, null或undefined表示原样返回, 数组中的对象表示对每个元素的模板, 对象中的 " ? " 键表示适配所有键',type:'any',def:''},
								{name:'src',info:'原始数据',type:'any',def:''},
							]
						}
					]
				},{
					name:'列宽表达式',
					info:'通过列宽表达式列表, 返回宽度列表生成器, 表达式中, 数字表示固定宽度px, fr表示剩余宽度的权重(只限正整数), 支持百分数, 加减乘除运算',
					code:`
<script>
import {getCalcColumnWidthFn} from '@lexmis/baseui/src/util/common';

//不限宽模式
const calcColumnWidthFn1=getCalcColumnWidthFn([100,'10%+50','1fr','2fr','1fr+10%+50']);
calcColumnWidthFn1(1000); //[100, 150, 150, 300, 300]

//限宽模式
const calcColumnWidthFn2=getCalcColumnWidthFn([100,'10%+50','1fr','2fr',{width:'1fr+10%+50',maxWidth:200}]);
calcColumnWidthFn2(1000); //[100, 150, 183, 367, 200]
</${'script'}>`,
					tabs:[
						{
							name:'getCalcColumnWidthFn(columnWidths) => CalcColumnWidthFn',
							args:[
								{name:'columnWidths',info:'列宽表达式',type:'Array<undefined | number | string | WidthLimit>',def:''},
							]
						},{
							name:'WidthLimit',
							args:[
								{name:'width',info:'理想宽度',type:'undefined | number | string',def:''},
								{name:'minWidth',info:'最小宽度',type:'number',def:''},
								{name:'maxWidth',info:'最大宽度(比minWidth优先)',type:'number',def:''},
							]
						},{
							name:'CalcColumnWidthFn(width) => Array<number>',
							args:[
								{name:'width',info:'列总宽度',type:'number',def:''},
							]
						}
					]
				},{
					name:'遍历树结构',
					info:'遍历树结构, 可提前退出, 可检索祖先节点',
					code:`
<script>
import {loopTree} from '@lexmis/baseui/src/util/common';

const tree1=[
	{
		name:'节点1',
		sons:[
			{name:'节点1-1'},
			{name:'节点1-2'},
		]
	},{
		name:'节点2',
		sons:[
			{name:'节点2-1'},
			{name:'节点2-2'},
		]
	}
];
loopTree(tree1,function({node,parent}){
	console.log('遍历:',node.name);
	if(node.name==='节点1-2'){
		while(parent){
			console.log('祖先:',parent.node.name);
			parent=parent.parent;
		}
		//提前退出遍历
		return true;
	}
},'sons');
/*
遍历: 节点1
遍历: 节点1-1
遍历: 节点1-2
祖先: 节点1
 */
</${'script'}>`,
					tabs:[
						{
							name:'loopTree(tree, callback, childrenAttr) => Array<any>',
							args:[
								{name:'tree',info:'需要遍历的树',type:'Array<any>',def:''},
								{name:'callback',info:'每个节点的回调函数, 返回值可以指示, 删除节点, 跳过节点, 终止遍历',type:'TreeNodeCallback',def:''},
								{name:'childrenAttr',info:'节点的子节点数组属性',type:'string',def:'children'},
							]
						},{
							name:'TreeNodeCallback(nodeWrap) => TreeNodeCallbackState | boolean',
							args:[
								{name:'nodeWrap',info:'当前遍历节点的包装对象',type:'TreeNodeWrap',def:''},
							]
						},{
							name:'TreeNodeWrap',
							args:[
								{name:'node',info:'当前节点',type:'any',def:''},
								{name:'parent',info:'当前节点父节点的包装对象',type:'TreeNodeWrap | undefined',def:''},
							]
						},{
							name:'TreeNodeCallbackState',
							args:[
								{name:'skip',info:'指示跳过遍历当前节点的子节点',type:'boolean',def:''},
								{name:'stop',info:'指示终止遍历',type:'boolean',def:''},
								{name:'remove',info:'指示删除当前节点',type:'boolean',def:''},
							]
						}
					]
				},{
					name:'获取小数位数',
					info:'传入一个实数, 返回该实数的小数位数, Infinity, NaN, undefined会返回-1',
					code:`
<script>
import {decimalDigits} from '@lexmis/baseui/src/util/common';

//传数字类型
decimalDigits(1.23); //2
decimalDigits(1.2300); //2
decimalDigits(1.23e-100); //102

//传字符串类型
decimalDigits('1.23'); //2
decimalDigits('1.2300'); //2
decimalDigits('1.23e-100'); //102
</${'script'}>`,
					tabs:[
						{
							name:'decimalDigits(number) => number',
							args:[
								{name:'number',info:'传入的实数',type:'number | string',def:''},
							]
						}
					]
				},{
					name:'四舍五入',
					info:'把指定实数, 按一定小数位数四舍五入',
					code:`
<script>
import {round} from '@lexmis/baseui/src/util/common';

round(3.141); //3
round(3.141,2); //3.14
</${'script'}>`,
					tabs:[
						{
							name:'round(number, digits) => number',
							args:[
								{name:'number',info:'被四舍五入的实数',type:'number',def:''},
								{name:'digits',info:'保留的小数位数',type:'number',def:'0'},
							]
						}
					]
				},{
					name:'安全加法',
					info:'浮点数的加减不会出现误差, 例如:1 - 0.9',
					code:`
<script>
import {add} from '@lexmis/baseui/src/util/common';

add(1,-0.9); //0.1
</${'script'}>`,
					tabs:[
						{
							name:'add(p1, p2) => number',
							args:[
								{name:'p1',info:'相加数1',type:'number',def:''},
								{name:'p2',info:'相加数2',type:'number',def:''},
							]
						}
					]
				},{
					name:'安全加法(多个)',
					info:'浮点数的加减不会出现误差, 例如:1 - 0.9 + 1.2',
					code:`
<script>
import {adds} from '@lexmis/baseui/src/util/common';

adds(1,-0.9,1.2); //1.3
</${'script'}>`,
					tabs:[
						{
							name:'adds(...params) => number',
							args:[
								{name:'params',info:'相加数',type:'number',def:''},
							]
						}
					]
				},{
					name:'安全乘法',
					info:'浮点数的乘除不会出现误差, 例如:0.1 * 0.9',
					code:`
<script>
import {multi} from '@lexmis/baseui/src/util/common';

multi(0.1,0.9); //0.09
</${'script'}>`,
					tabs:[
						{
							name:'multi(p1, p2) => number',
							args:[
								{name:'p1',info:'相乘数1',type:'number',def:''},
								{name:'p2',info:'相乘数2',type:'number',def:''},
							]
						}
					]
				},{
					name:'安全乘法(多个)',
					info:'浮点数的乘除不会出现误差, 例如:0.1 * 0.9 * 2',
					code:`
<script>
import {multis} from '@lexmis/baseui/src/util/common';

multis(0.1,0.9,2); //0.18
</${'script'}>`,
					tabs:[
						{
							name:'multis(...params) => number',
							args:[
								{name:'params',info:'相乘数',type:'number',def:''},
							]
						}
					]
				},{
					name:'获取唯一键',
					info:'获取和当前时间相关的唯一键',
					code:`
<script>
import {getUid} from '@lexmis/baseui/src/util/common';

getUid(); //1626685036773-1
</${'script'}>`,
					tabs:[
						{
							name:'getUid() => string',
							args:[
							]
						}
					]
				},{
					name:'获取用于表单上的api',
					info:'获取一个内部封装了一定执行机制的api',
					code:`
<script>
import {newLexmisApi} from '@lexmis/baseui/src/util/common';

newLexmisApi();
</${'script'}>`,
					tabs:[
						{
							name:'newLexmisApi() => LexmisApi',
							args:[
							]
						},{
							name:'LexmisApi',
							args:[
								{name:'vm',info:'vue实例',type:'Vue',def:''},
								{name:'setVm',info:'设置vue实例',type:'(vm:Vue) => void',def:''},
								{name:'initComplete',info:'初始化完成',type:'() => void',def:''},
								{name:'runTask',info:'vm实例被挂载后执行',type:'(task:Function) => Promise<any>',def:''},
								{name:'runAfterInit',info:'vm实例被挂载且初始化完成时, 执行',type:'(task:Function) => Promise<any>',def:''},
							]
						}
					]
				},
			],
		};
	},
};
(function(){
	console.log('=========判断普通对象=========');
	console.log(isObject(null));
	console.log(isObject(undefined));
	console.log(isObject(false));
	console.log(isObject(10));
	console.log(isObject('false'));
	console.log(isObject(function(){}));
	console.log(isObject(Symbol.iterator));
	console.log(isObject([]));
	console.log(isObject(new Date()));
	console.log(isObject({}));
})();
(function(){
	console.log('=========判断基本类型=========');
	console.log(isBaseType(null));
	console.log(isBaseType(undefined));
	console.log(isBaseType(false));
	console.log(isBaseType(10));
	console.log(isBaseType('false'));
	console.log(isBaseType(function(){}));
	console.log(isBaseType(Symbol.iterator));
	console.log(isBaseType([]));
	console.log(isBaseType(new Date()));
	console.log(isBaseType({}));
})();
(function(){
	console.log('=========深度拷贝=========');
	//常用情况
	const target1={a:1,b:2};
	console.log(extend(target1,{a:2,c:3}));
	//追加数组元素
	const target2=[1,2,3];
	console.log(extend(target2,[4,5]));
	//替换数组元素
	const target3=[1,2,3];
	console.log(extend(target3,replaceArr([4,5])));
	//支持多个对象合并,且以上情况的任意嵌套,组合
	const target4={a:1,b:2,c:[1,2,3],d:[1,2,3]};
	console.log(extend(target4,{a:2,f:10},{c:[4,5]},{d:replaceArr([4,5])}));
})();
(function(){
	console.log('=========默认值模板=========');
	//基本类型
	console.log(defaultTemplate(10,undefined));
	console.log(defaultTemplate(10,20));
	console.log(defaultTemplate(10,'20'));
	console.log(defaultTemplate(false,null));
	console.log(defaultTemplate(false,true));
	console.log(defaultTemplate(false,'true'));
	//原样返回
	console.log(defaultTemplate(null,10));
	console.log(defaultTemplate(null,'10'));
	console.log(defaultTemplate(null,{a:1}));
	//数组默认值
	console.log(defaultTemplate([10],[null,'20',20]));
	//对象默认值
	console.log(defaultTemplate({a:10,b:false,c:20},{a:'20',b:null,d:'test'}));
	console.log(defaultTemplate({a:10,'?':true},{b:'false',c:null,d:false}));
	//自定义处理函数
	console.log(defaultTemplate(function(data){
		return data*2;
	},20));
})();
(function(){
	console.log('=========列宽表达式=========');
	const calcColumnWidthFn=getCalcColumnWidthFn([100,'10%+50','1fr','2fr','1fr+10%+50']);
	console.log(calcColumnWidthFn(1000));
	const calcColumnWidthFn2=getCalcColumnWidthFn([100,'10%+50','1fr','2fr',{width:'1fr+10%+50',maxWidth:200}]);
	console.log(calcColumnWidthFn2(1000));
})();
(function(){
	console.log('=========遍历树结构=========');
	const tree1=[
		{
			name:'节点1',
			sons:[
				{name:'节点1-1'},
				{name:'节点1-2'},
			]
		},{
			name:'节点2',
			sons:[
				{name:'节点2-1'},
				{name:'节点2-2'},
			]
		}
	];
	loopTree(tree1,function({node,parent}){
		console.log('遍历:',node.name);
		if(node.name==='节点1-2'){
			while(parent){
				console.log('祖先:',parent.node.name);
				parent=parent.parent;
			}
			//提前退出遍历
			return true;
		}
	},'sons');
})();
(function(){
	console.log('=========获取小数位数=========');
	//传数字类型
	console.log(decimalDigits(1.23));
	console.log(decimalDigits(1.2300));
	console.log(decimalDigits(1.23e-100));
	//传字符串类型
	console.log(decimalDigits('1.23'));
	console.log(decimalDigits('1.2300'));
	console.log(decimalDigits('1.23e-100'));
})();
(function(){
	console.log('=========四舍五入=========');
	console.log(round(3.141));
	console.log(round(3.141,2));
})();
(function(){
	console.log('=========安全加法=========');
	console.log(add(1,-0.9));
})();
(function(){
	console.log('=========安全加法(多个)=========');
	console.log(adds(1,-0.9,1.2));
})();
(function(){
	console.log('=========安全乘法=========');
	console.log(multi(0.1,0.9));
})();
(function(){
	console.log('=========安全乘法(多个)=========');
	console.log(multis(0.1,0.9,2));
})();
(function(){
	console.log('=========获取唯一键=========');
	console.log(getUid());
})();
(function(){
	console.log('=========获取用于表单上的api=========');
	console.log(newLexmisApi());
})();
